{% extends 'mobile/base_mobile.html' %}
{% load staticfiles %}
{% load my_filters %}
{% block title %}
    秒杀列表-{{ shop.title }}
{% endblock %}
{% block content %}
    {% autoescape off %}
        <body>
        <style>
            body {
                text-align: center;
                color: white;
            }

            .top_area {
                background-color: {{ artical_color|default:'#e20e35'}};
                border-radius: 0 0 32px 32px;
                padding: 64px 64px 64px 64px;

            }

            .act_main {
                position: relative;
                width: 90%;
                height: 100%;
                background-color: #faf9f9;
                margin: 40px auto 40px auto;
                box-shadow: 10px 10px 10px rgba(104, 103, 103, 0.39);
                padding-bottom: 32px;
                border-radius: .5rem;
                color: black;
                text-align: left;
            }

            .shop_logo {
                display: inline-block;
                float: left;
                width: 2rem;
                height: 2rem;
                border-radius: 0.2rem;
            }

            .shop_title {
                font-size: 32px;
                margin-top: 20px;
                padding-left: 20px;
                line-height: 2rem;
                font-weight: 600;
            }

            .title {
                position: relative;
                top: 32px;
                padding: 1rem 2rem 3rem 2rem;
                font-size: 1.1rem;
                font-weight: 500;
            }

            .act_title {
                width: 100%;
                font-weight: 500;
                font-size: 1rem;
                padding-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .pd1rem {
                padding: 1rem 0 0 1rem;
            }

            .inline_dis {
                display: inline-block;
            }

            .act_img {
                width: 300px;
                height: 300px;
                border-radius: 30px;
            }

            .text_important {
                position: relative;
                top: -15px;
                color: {{ artical_color|default:'#e20e35'}};
                font-size: 1.5em;
            }

            .f_right {
                display: inline-block;
                float: right;
            }

            .real_price {
                padding-top: 1rem;
            }

            .mst_info {
                color: #4E5465;
                padding-left: 20px;
                padding-top: 1rem;
            }

            .btn_nomal {
                margin-right: 2rem;
                background-color: {{ artical_color|default:'#e20e35'}};
                border-radius: 30px;
                padding: 5px 20px;
                color: white;
            }

            .order_state {
                display: inline-block;
                padding-right: 1rem;
                float: right;
                color: {{ artical_color|default:'#e20e35'}};
                line-height: 2rem;
                font-weight: 600;
            }
        </style>
        {% for kill in kill_list %}
            <div class="act_main">
                <div class="shop_info pd1rem">
                    <img class="shop_logo" src="{{ kill.shop.get_logo_url }}">
                    <span class="shop_title">{{ kill.shop.title }}</span>
                    {% if not kill.has_start %}
                        <div class="order_state">未开始</div>
                    {% elif kill.has_start and not kill.has_end %}
                        <div class="order_state">抢购中</div>
                    {% else %}
                        <div class="order_state">已结束</div>
                    {% endif %}
                </div>
                <hr class="" style="margin: 1rem 1rem 0 1rem;">
                <div class="act_info pd1rem"
                     onclick="location.href='{{ kill.get_mobile_url }}'">
                    <img class="act_img inline_dis" src="{{ kill.get_image_url }}">
                    <div class="inline_dis" style="width: 60%;">
                        <span class="act_title inline_dis">{{ kill.title }}</span>
                        <div class="real_price f_right">
                            <span class="text_important ">¥ {{ kill.price_discount|div100 }}</span>
                            <span class="">&nbsp;<s>{{ kill.price_original|div100 }}</s></span>
                        </div>
                        {#                        <div class="mst_info"><span class="">姓名 ：</span>{{ master.name }}</div>#}
                        {#                        <div class="mst_info"><span class="">手机 ：</span>{{ master.phone }}</div>#}
                        <div class="mst_info">
                            {#                            {% if master.order %}#}
                            {#                                {% if master.order.state == 3 %}#}
                            {#                                    <span class="btn_nomal">确认收货</span>#}
                            {#                                {% endif %}#}
                            {#                            {% endif %}#}
                            <span class="btn_nomal">立即秒杀</span>
                        </div>
                    </div>

                </div>
                <hr class="" style="margin: 1rem 1rem 0 1rem;">
                    <div class="pd1rem">
                        <span>{{ kill.start_time }} - {{ kill.end_time }}</span>
                    </div>
            </div>
        {% endfor %}
        <script>
            function timer(element, card_time) {
                console.log(card_time)
                element.downCount({
                    //时间格式转换
                    date: card_time,
                    offset: +8 //抵消，减去时间差
                }, function () {
                    location.reload()
                });
            }

            $(".music_logo").click(function () {
                playPause()
                if ($(this).hasClass('super_round') == false) {
                    $(this).addClass('super_round')
                } else {
                    $(this).removeClass("super_round")
                }
            })
            $(function () {

            });

            function join_now() {
                let data = $('.join_info_form').serialize();
                console.log(data)
                $.ajax({
                    async: false,//这一步是非常重要的，作用是设置为同步执行
                    type: "POST",
                    data: $('.join_info_form').serialize(),
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        if (res.status == 0) {
                            alert('报名成功！')
                            location.reload()
                        } else if (res.status == 1) {
                            alert(res.detail)
                            location.reload()
                        } else {
                            for (var key in res.detail) {
                                var item = res.detail[key];
                                alert(item[0]); //AA,BB,CC,DD
                                break;
                            }
                        }

                    },
                    error: function (res) {
                        alert(res)
                    }
                });
            }

            /* 音乐播放暂停 */
            function playPause() {
                var music = document.getElementById('media');
                if (music.paused) {
                    music.play();
                } else {
                    music.pause();
                }

            }
        </script>
        {% if sign %}
            <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
            <script type="text/javascript">
                wx.config({
                    debug: false,
                    appId: '{{ sign.appId}}',
                    timestamp: {{ sign.timestamp }},
                    nonceStr: '{{ sign.nonceStr }}',
                    signature: '{{ sign.signature }}',
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'hideMenuItems'
                    ]
                });

                wx.ready(function () {
                    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                    wx.checkJsApi({
                        jsApiList: [
                            'onMenuShareAppMessage',
                            'hideMenuItems'
                        ],
                        success: function (res) {
                        }
                    });

                    wx.hideMenuItems({
                        menuList: ['menuItem:share:timeline']
                    });

                    // 2. 分享接口
                    // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareAppMessage({
                        title: '{{ kill.title|linebreaksbr|striptags }}',
                        link: '{{ sign.share_url|safe }}',
                        desc: '这波操作稳了！我参加了“{{ kill.title|linebreaksbr|striptags }}”的活动，快来秒杀',
                        imgUrl: '{{ kill.get_image_url }}',
                        trigger: function (res) {
                        },
                        success: function (res) {
                            //share_link_count();
                        },
                        cancel: function (res) {
                        },
                        fail: function (res) {
                        }
                    });
                });
            </script>
        {% endif %}
        </body>
    {% endautoescape %}
{% endblock %}
